<template>
  <div class="container">
    <el-collapse-transition name="el-zoom-in-top">
      <TableList
        v-show="ntype == 'list'"
        ref="TableListRef"
        @TableListClick="TableListClick"
      ></TableList>
    </el-collapse-transition>

    <el-collapse-transition
      v-if="['add', 'edit'].includes(ntype)"
      name="el-zoom-in-bottom"
    >
      <UserInfo
        :queryId="queryId"
        @close="ntype = 'list'"
        @handleRefresh="$refs.TableListRef.refreshChange()"
        :ntype="ntype"
      ></UserInfo>
    </el-collapse-transition>
  </div>
</template>

<script>
import UserInfo from "./UserInfo.vue";
import TableList from "./TableList.vue";

export default {
  components: { TableList, UserInfo },
  created() {},
  data() {
    return {
      ntype: "list",
      queryId: 0,
    };
  },
  methods: {
    // 处理TableList点击事件
    TableListClick(ntype, row) {
      this.ntype = ntype;
      if (this.ntype == "edit") {
        this.queryId = row.userId;
      }
    },
  },
};
</script>